<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>验证码</title>
    <link rel="stylesheet" href="assets/css/reset.css">
    <style>
        .box{margin:50px auto;
            width:460px;
            height:40px;
            line-height: 40px;
            background:#fff;
            padding:0 10px;
            box-sizing: border-box;
        }
        .codeNum{
            display: inline-block;
            width:80px;
            height:40px;
            line-height: 40px;
            background: #89d7ff;
            color:#fff;
            text-align: center;
        }
        .codeGet{
            display: inline-block;
            width:80px;
            height:40px;
            line-height: 40px;
            text-align: center;
        }
        .login{
            text-align: center;
            width: 100px;
            height: 38px;
            line-height: 38px;
            margin: 0 auto;
            background: #43921a;
            border-radius: 5px;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="box">
    <label>验证码：</label>
    <input type="text" name="" id="codeVal" placeholder="请输入验证码">
    <span id="code" class="codeNum"></span>
    <span onclick="createCode()" class="codeGet">重新获取</span>
    <p class="notice"></p>
</div>
<div class="login" onclick="login()">登录</div>

<script src="assets/jq/jquery-2.1.4.min.js"></script>
<script src="assets/jq/common.js"></script>
<script>
    $(function(){
        createCode();
    });

    function createCode(){
        var _length = 4;
        var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');
        for(var i = 0,code = '';i < _length;i++){
            //设置随机数范围
            var index = Math.floor(Math.random()*36);
            code += random[index];
        }
        $('#code').html(code);
        $('.notice').html('');
        $('#codeVal').val('');
    }

    function login(){
        var _codeVal = $.trim($('#codeVal').val().toUpperCase());//把字符串转换成大写
        var _codeNum = $.trim($('#code').html());
        if(_codeVal == ''){
            $('.notice').html("<font color='red'>请输入验证码</font>");
        }else if(_codeVal != _codeNum){
            $('.notice').html("<font color='red'>验证码错误，请重新输入</font>");
        }else{
            $('.notice').html("<font color='#0fab01'>验证码正确</font>");
        }
    }

</script>

</body>
</html>